FEC-1010: add positionFixed prop and resize-based reflow to prevent viewport clipping#3260
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: f3ce9b4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 97 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
valoriecarli
approved these changes
Jun 15, 2026
valoriecarli
left a comment
valoriecarli
left a comment
Contributor
There was a problem hiding this comment.
thanks for keeping at it with this adventure!!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When a
TooltipWrapperComponentrenders the tooltip body into a React portal(e.g.
ReactDOM.createPortal(..., document.body)), tooltips near the bottom of thepage render partially outside the visible viewport.
Two root causes were identified:
1.
position: absolutecoordinate driftPopper.js defaults to
position: absolute. When the scroll container is not<body>(e.g. the MC app scrolls an inner div), the absolute coordinates Poppercomputes diverge from the viewport, causing the portal tooltip to paint at the
wrong location.
2. Position computed before content has loaded
Popper.js calculates the tooltip's position when the popper node is first mounted.
If the body contains an
<img>that has not yet loaded, the container reports 0height at that moment. Once the image loads and the container grows, Popper.js never
recomputes — the tooltip extends below the visible area.
Fix
positionFixedpropA new optional
positionFixed?: booleanprop is threaded through tousePopper.When
true, Popper.js usesposition: fixedfor the popper element instead ofposition: absolute. Fixed positioning is always viewport-relative and bypasses anyscrolled ancestor that would otherwise shift absolute coordinates.
Consumers should pair this with:
flipdisabled prevents Popper from switching placement (e.g."top"→"bottom")near the page edge.
preventOverflowwithboundariesElement: 'viewport'aligns theboundary with the fixed-position coordinate system so the tooltip is clamped correctly.
ResizeObserverreflowA
ResizeObserveris attached to the popper element whenever the tooltip is open.If the element's dimensions change after the initial position was computed (the common
case when an
<img>loads lazily inside the body),scheduleUpdate()is called soPopper.js recomputes with the correct height and
preventOverflowcan clamp it withinthe viewport. The observer is disconnected when the tooltip closes.
Files changed
packages/components/tooltip/src/tooltip.tsxBackward compatibility
positionFixedis optional and defaults tofalse, preserving existing behaviorfor all current consumers.